<template>
  <div class="first">
    <div class="second">
      <svg
        class="icon"
        aria-hidden="true"
        style="width: 30px; height: 30px; margin-left: 10px"
      >
        <use xlink:href="#icon-bofang_o"></use>
      </svg>
      <div style="margin-right: 80px">
        <span style="color: #4e4c4d; font-weight: 600">播放全部</span>
        <span v-if="data.privileges" style="color: #cac6c7"
          >(共{{ data.privileges.length }})</span
        >
      </div>
      <div class="subscribedCount">
        <span>+</span>
        <span v-if="data.playlist"
          >收藏({{ data.playlist.subscribedCount }})</span
        >
      </div>
    </div>
    <div style="margin-top: 20px;display: flex;flex-direction:column;" >
      <div v-for="(item, index) in data.playlist.tracks" :key="index" class="list" v-if="data.playlist" @click="Muscigo(index)">
       <span style="margin-left:20px;color: #343434; font-weight: 600">{{ index + 1 }}</span> 
        <div style="left:60px;position: absolute; display:flex;flex-direction: column;justify-content: center;align-items: flex-start;height: 100%;width: 220px;">
          <span style="color: #343434; font-weight: 600">{{item.name}}</span>
          <span v-if="data.privileges" style="color:#cac6c7"
            >{{item.ar[item.ar.length-1].name}}</span
          >
        </div>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 30px; height: 30px;position: absolute;right: 50px;"
          v-if="item.mv"
        >
          <use xlink:href="#icon-playSquare" style="fill:red;"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 30px; height: 30px;position: absolute;right: 10px;"
        >
          <use xlink:href="#icon-danlieliebiao"></use>
        </svg>
      </div>
    </div>
  </div>
</template>
<script>
import {getMusicgc} from '@/request/api/music'
import store from '@/store';
import { mapState } from 'vuex';
export default {
  props: ["data"],
  data() {
    return {};
  },
  computed: {...mapState(['gechi'])},
  methods: {
    Muscigo(index){
      this.$store.commit('setindex',index)
     this.$store.commit('getMusic',this.data.playlist.tracks)
      // this.$store.state.tronls=true
      getMusicgc(this.data.playlist.tracks[index].id).then(res=>{
       this.$store.commit('setgechi',res.data.lrc.lyric)
        // console.log(res.data.lrc.lyric)
      })
    }
  },
};
</script>
<style lang="less" scoped>
.first {
  width: 100%;
  border: 1px solid #d8e6f2;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  background-color: #ffffff;
  margin-top: 0.6rem;
  .second {
    display: flex;
    justify-content: center;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    color: #d8e6f2;
    margin-top: 0.2rem;
    .subscribedCount {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #f01c07;
      border-radius: 25px;
      font-size: 13px;
      font-weight: 500;
    }
  }
}
.list {
      display: flex;
      justify-content: center;
      justify-content: space-between;
      width: 100%;
      height: 50px;
      align-items: center;
      color: #d8e6f2;
      margin-top: 0.2rem;
      position: relative;
    }
</style>
